<template>
  <div class="share">
    <div class="z-9999 box-border h-306rpx rounded-tl-24rpx rounded-tr-24rpx bg-hex-ffffff pt-48rpx">
      <div class="flex flex-wrap justify-around">
        <div v-for="(item, index) in shareList" :key="index" class="relative mb-48rpx w-23% flex flex-col items-center"
        >
          <div>
            <image class="h-68rpx w-68rpx" :src="item.imgurl" mode="scaleToFill" />
          </div>
          <template v-if="item.id === 1">
            <button open-type="share" data-name="shareFriends"
                    class="absolute bottom-0 top-1rpx h-130rpx bg-transparent text-24rpx leading-199rpx text-hex-333">微信好友</button>
          </template>
          <template v-else-if="item.id ===2">
            <button class="absolute bottom-0 top-1rpx h-130rpx bg-transparent text-24rpx leading-199rpx text-hex-333" @click.stop="getShortLink">
              {{ item.title }}</button>
          </template>
          <template v-else-if="item.id ===3">
            <button class="absolute bottom-0 top-1rpx h-130rpx bg-transparent text-24rpx leading-199rpx text-hex-333" @click.stop="getWcode">
              {{ item.title }}</button>
          </template>
        </div>
      </div>
      <div class="mb-30rpx mt-36rpx h-1rpx bg-hex-F5F5F5" />
      <div class="flex items-center justify-center" @click="closepop1">取消</div>
    </div>
  </div>
</template>

<script setup>

const emits = defineEmits(['close'])
const shareList = [
  { id: 1, imgurl: `${cdnUrl}/svgicons/pop_wx.svg${imgVersion}`, title: '微信好友' },
  { id: 2, imgurl: `${cdnUrl}/svgicons/pop_copylink.svg${imgVersion}`, title: '复制链接' },
  { id: 3, imgurl: `${cdnUrl}/svgicons/pop_qrcode.svg${imgVersion}`, title: '二维码' },
]
const closepop1 = () => {
  emits('close')
}
const getShortLink = () => {
  uni.$emit('copylick')
  closepop1()
}
const getWcode = () => {
  uni.$emit('openCode')
  closepop1()
}
</script>

<style lang="scss">
button::after {
  border: none;
}

button {
  background-color: transparent;

}
</style>
